<script setup lang="ts">
import ItemCascader from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemCascader/index.vue"
import ItemDate from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemDate/index.vue"
import ItemInput from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemInput/index.vue"
import ItemInputNumber from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemInputNumber/index.vue"
import ItemPeaceRender from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemPeaceRender/index.vue"
import ItemRadio from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemRadio/index.vue"
import ItemSelect from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemSelect/index.vue"
import ItemTimePicker from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemTimePicker/index.vue"
import ItemTreeSelect from "@/infrastructure/PeaceDataTable/component/Formz/Component/ItemTreeSelect/index.vue"
import { PeaceForm } from '@/components/type/PeaceForm'
import { PeaceColumn } from '@/components/type/PeaceColumn'
import {useAttrs} from "vue"
import type { FormRules } from 'naive-ui'

const props = withDefaults(
  defineProps<{
    peaceColumn: PeaceColumn[]
    formModel: {
      type: Record<string, unknown>,
      required: true
    }
  }>(),
  {
    show: false,
  },
)
const useAttr = useAttrs()
const formColumns = computed(() => props.peaceColumn)
const formObj = computed(() => props.formModel)
// 表单实例
const formRef = ref<FormInst | null>(null)
const validateForm = (callback:(errors:any)=>any) => {
  // console.log("?&&&&&&&&&&")
  // console.log(useAttr.model,"???")
  formRef.value?.validate((errors) => {
    callback(errors)
  })
}
defineExpose({
  validateForm
})
</script>
<template>
  <n-form ref="formRef" v-bind="$attrs">
    <n-grid :cols="Math.floor(formColumns.length/6)" :x-gap="24">
<!--    <n-grid :cols="4" :x-gap="24">-->
      <n-grid-item v-for="(col,index) in formColumns" :key="col.key as string">
          <ItemCascader :peace-form="col" :index="index" :form-model="formObj"/>
          <ItemDate :peace-form="col" :index="index" :form-model="formObj"/>
          <ItemInput :peace-form="col" :index="index" :form-model="formObj"/>
          <ItemInputNumber :peace-form="col" :index="index" :form-model="formObj"/>
          <ItemPeaceRender :peace-form="col" :index="index" :form-model="formObj"/>
          <ItemRadio :peace-form="col" :index="index" :form-model="formObj"/>
          <ItemSelect :peace-form="col" :index="index" :form-model="formObj"/>
          <ItemTimePicker :peace-form="col" :index="index" :form-model="formObj"/>
          <ItemTreeSelect :peace-form="col" :index="index" :form-model="formObj"/>
      </n-grid-item>
    </n-grid>
  </n-form>
</template>
<style scoped></style>
